<template>
  <div class="add">
    <nav-bar class="nav-bar">
      <div class="center" slot="center">新增地址</div>
    </nav-bar>
    <section class="main">
      <input
        type="text"
        placeholder="请填写你的名字"
        class="name"
        v-model="name"
      />
      <input
        type="text"
        placeholder="小区/写字楼/学校等"
        @click="handleSkipAddDetail"
        v-model="address"
      />
      <input
        type="text"
        placeholder="请填写详细送餐地址"
        v-model="detailAddress"
        :class="{ active: isShowDetailAddress }"
      />
      <div v-show="isShowDetailAddress">
        <p class="adress-detail-tips1" v-show="detailAddressTip === 0">
          送餐地址太短了，不能辨识
        </p>
        <p class="adress-detail-tips2" v-show="detailAddressTip === 1">
          请详细填写送餐地址
        </p>
      </div>
      <input
        type="text"
        placeholder="请填写能够联系到您的手机号"
        v-model="phone"
        :class="{ active: isShowPhone }"
      />
      <div v-show="isShowPhone">
        <p class="phone-tips1" v-show="phoneTip === 0">手机号不能为空</p>
        <p class="phone-tips2" v-show="phoneTip === 1">请输入正确的手机号</p>
      </div>
      <input
        type="text"
        placeholder="备用联系电话（选填）"
        v-model="sparePhone"
      />
      <div v-show="isShowSparePhone">
        <p class="phone-tips1" v-show="sparePhoneTip === 0">手机号不能为空</p>
        <p class="phone-tips2" v-show="sparePhoneTip === 1">
          请输入正确的手机号
        </p>
      </div>
    </section>
    <div
      class="add-button"
      :style="{ color: changeColor ? '#fff' : '#a9edb5' }"
      @click="handleAddButton"
    >
      新增地址
    </div>
    <keep-alive>
      <router-view :address="address" />
    </keep-alive>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
export default {
  data() {
    return {
      name: "",
      address: "",
      detailAddress: "",
      phone: "",
      sparePhone: "",
      isShowDetailAddress: false,
      isShowPhone: false,
      isShowSparePhone: false,
      detailAddressTip: -1,
      phoneTip: -1,
      sparePhoneTip: -1,
      reg: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
      supersede: [],
      changeColor: false,
      geohash: '' //经纬度
    };
  },
  watch: {
    name(value) {
      this.handleCheck(!value, 1);
    },
    address(value) {
      this.$bus.$emit("address", value);
      this.handleCheck(!value, 2);
    },
    detailAddress(value) {
      this.isShowDetailAddress = value.length < 3 ? true : false;
      if (this.isShowDetailAddress) {
        this.detailAddressTip = value.length === 0 ? 1 : 0;
      }
      this.handleCheck(this.isShowDetailAddress, 3);
    },
    phone(value) {
      this.phoneTip = value.length === 0 ? 0 : 1;
      this.isShowPhone = this.reg.test(value) ? false : true;
      this.handleCheck(this.isShowPhone, 4);
    },
    sparePhone(value) {
      this.sparePhoneTip = value.length === 0 ? 0 : 1;
      this.isShowSparePhone = this.reg.test(value) ? false : true;
    },
    supersede(value) {
      this.changeColor = this.supersede.length === 4 ? true : false;
    },
  },

  mounted() {
    this.$bus.$on("handleNewAddress", (item) => {
      this.address = item.name;
      this.geohash = item.geohash
    });
  },
  methods: {
    handleSkipAddress() {
      this.$router.back();
    },
    handleSkipAddDetail() {
      this.$router.push("/profile/info/address/add/addDetail");
    },
    // 校验input是否合乎规范
    handleCheck(boor, num) {
      if (!boor) {
        if (!this.supersede.includes(num)) {
          this.supersede.push(num);
        }
      } else {
        for (const key in Object.values(this.supersede)) {
          if (Object.values(this.supersede)[key] === num) {
            this.supersede.splice(key, 1);
          }
        }
      }
    },
    handleAddButton() {
      if (this.changeColor) {
        const data = {
          address: this.address,
          address_detail: this.detailAddress,
          name: this.name,
          geohash: this.geohash,
          phone: this.phone,
          phone_bk: this.sparePhone,
        }
        this.$bus.$emit('handleAddButton',data)
      } else {
        this.$toast.handleTipsText("请填写正确的格式");
      }
    },
  },
  components: {
    NavBar,
  },
};
</script>
<style lang="less" scoped>
@import url('assets/css/mixin');
.add {
  background-color: #f2f2f2;
  .initial-children();
  .main {
    padding: 10px;
    margin-top: 10px;
    background-color: #fff;
    input {
      width: 100%;
      padding: 8px;
      border: 2px solid #e4e4e4;
      border-radius: 3px;
      margin-top: 10px;
      background-color: #f2f2f2;
      font-size: 14px;
    }
    .name {
      margin: 0;
    }
    .active {
      border: 1px solid #ed6342;
    }
    .adress-detail-tips1,
    .adress-detail-tips2,
    .phone-tips1,
    .phone-tips2 {
      margin-top: 5px;
      font-weight: 700;
      font-size: 9px;
      color: #ec796e;
    }
  }
  .add-button {
    .determine();
    text-align: center;
    margin: 20px 10px;
    color: #a9edb5;
  }
}
</style>